
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Button,
    View,
    TouchableOpacity
} from 'react-native';

import {Member} from './member/index'
import {Message} from './message/index'

export class MCustomer extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            pos : "member"
        };
    }
    swiper(pos){

        this.setState({
            pos : pos
        });
    }
    render() {
        // const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <TouchableOpacity activeOpacity={1} onPress={()=>{this.swiper('member')}}>
                        <View style={[styles.button,this.state.pos=='member' && styles.buttonSelect]}>
                            <Text style={[styles.buttonText,this.state.pos=='member' && styles.buttonSelectText]}>联系人</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={1}onPress={()=>{this.swiper('message')}}>
                        <View style={[styles.button,this.state.pos=='message' && styles.buttonSelect]}>
                            <Text style={[styles.buttonText,this.state.pos=='message' && styles.buttonSelectText]}>消息</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                <View style={styles.content}>

                    {
                        this.state.pos =='member' ?  <Member/> : <Message/>
                    }
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    header:{
        flexDirection:'row',
        justifyContent:"center",
        backgroundColor:"#ee4433",
        borderRadius:5,
        padding:10,
    },
    content:{
        flex :1
    },
    button:{
        borderRadius:5,
        width:50,
        height:30,

        borderWidth : 1,
        borderColor:"#fff",
        justifyContent:"center",
        alignItems:"center"
    },
    buttonSelect:{
        backgroundColor:"#fff",
    },
    buttonSelectText:{
        color:"#ee4433",

    },
    buttonText:{
        color : "#fff",
        fontSize:12,
    }
});
